<template>
  <div class="wrapper">
    <img src="@/assets/images/activity/prize_head.png" class="wrapper-head" @click="openDiscord" alt="">
    <div class="wrapper-title">
      <img src="@/assets/images/user/prize.png" class="prize-icon" alt="">
      <span class="text">{{ $t('routerTitle.winning_record') }}</span>
    </div>
    <div class="table">
      <div class="table-head ff-bold">
        <Row>
          <Col span="5">
          <div class="head-title first-sty">
            {{ $t('christmas.head_win_time') }}
          </div>
          </Col>
          <Col span="7">
          <div class="head-title align-sty">
            {{ $t('christmas.head_act_name') }}
          </div>
          </Col>
          <Col span="7">
          <div class="head-title align-sty">
            {{ $t('christmas.prize_name') }}
          </div>
          </Col>
          <Col span="5">
          <div class="head-title align-sty">
            {{ $t('christmas.prize_type') }}
          </div>
          </Col>
        </Row>
      </div>
      <div class="table-body" v-if="dataArr && dataArr.length > 0">
        <div class="table-content" v-for="item in dataArr" :key="item.id">
          <Row>
            <Col span="5">
            <div class="prize-time  first-sty">{{ item.rewardTime }}</div>
            </Col>
            <Col span="7">
            <div>
              <Poptip :content="item.activityName" trigger="click" transfer>
                <div class="activity-name align-sty">
                  {{ item.activityName }}
                </div>
              </Poptip>
            </div>
            </Col>
            <Col span="7">
            <div class="prize-name align-sty">{{ item.rewardName }}</div>
            </Col>
            <Col span="5">
            <!-- 奖品类型 VIRTUAL-虚拟奖品 REAL-真实奖品 -->
            <div class="prize-type align-sty" v-if="item.rewardType == 'VIRTUAL'">{{ $t('christmas.virtual_prize') }}
            </div>
            <div class="prize-type align-sty" v-if="item.rewardType == 'REAL'">{{ $t('christmas.real_prize') }}</div>
            </Col>
          </Row>
        </div>
        <div class="wrapper-footer">
          <Page :total="totalAmount" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
            :page-size="form.pageSize" show-total />
        </div>
      </div>
      <div class="empty" v-if="dataArr.length === 0">
        <img src="@/assets/images/empty/empty_prize.png" class="empty-icon" alt="">
        <div class="tip-text">
          <span class="text">{{ $t('christmas.empty_tip_before') }}</span>
          <span class="btn" @click="openDiscord">
            <img src="@/assets/images/user/discord.png" class="discord-icon" alt="">discord
          </span>
          <span class="text">{{ $t('christmas.empty_tip_after') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { pageUserRewardRecords } from "@/api/activity";
export default {
  data() {
    return {
      form: {
        pageNo: 1,
        pageSize: 10
      },
      totalAmount: 0,//总条数
      dataArr: []
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      pageUserRewardRecords(this.form).then((res) => {
        this.dataArr = res.result.records;
        this.totalAmount = res.result.total;//总条数
      })
    },
    onPageSize(size) {
      // 设置每页条数
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getData();
    },
    onPage(index) {
      this.form.pageNo = index;
      this.getData();
    },
    openDiscord() {
      // window.open('https://discord.com/invite/t7xmAYwZhU', '_blank');
      window.open('https://discord.com/invite/H5fEeBCY3y', '_blank');
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {

  &-head {
    width: 100%;
    cursor: pointer;
  }

  &-title {
    margin-bottom: 20px;

    .prize-icon {
      width: 24px;
      height: 24px;
      vertical-align: sub;
    }

    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1E1714;
      line-height: 24px;
      margin-left: 8px;
    }
  }

  .table {

    &-head {
      height: 65px;
      background: #F7F9FC;
      border-radius: 8px 8px 8px 8px;

      .head-title {
        font-weight: 600;
        font-size: 18px;
        color: #929292;
        line-height: 65px;
      }

      .first-sty {
        margin-left: 66px;
      }

      .align-sty {
        text-align: center;
      }
    }

    &-body {
      padding-top: 46px;

      .table-content {
        margin-bottom: 64px;

        .prize-time {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #AEB0B9;
          line-height: 19px;
        }

        .activity-name {
          width: 450px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #1E1714;
          line-height: 19px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .prize-name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #1E1714;
          line-height: 19px;
        }

        .prize-type {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #1E1714;
          line-height: 19px;
        }

        .first-sty {
          margin-left: 24px;
        }

        .align-sty {
          text-align: center;
        }
      }


      .wrapper-footer {
        text-align: right;
      }
    }

    .empty {
      text-align: center;
      height: 550px;

      &-icon {
        width: 260px;
        margin-top: 20px;
      }

      .tip-text {
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #1E1714;
          line-height: 34px;
        }

        .btn {
          width: 109px;
          height: 34px;
          background: #1E1714;
          border-radius: 20px 20px 20px 20px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #FFFFFF;
          line-height: 22px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin: 0 12px;
          cursor: pointer;

          .discord-icon {
            width: 22px;
          }
        }
      }
    }
  }
}
</style>
